<template>
  <el-dialog
    @close="handleClose"
    center
    :title="$t('common.loanVoucher')"
    class="down-vouncher"
    :visible.sync="currentVisible">
     <div class="down-vouncher-modal" v-if="data">
      <div class="cont" ref="down">
        <img :src="require(`@/assets/img/bank/${this.data.channelCompany.toLowerCase()}.png`)" alt="">
        <!-- 放款人名称 -->
        <div class="items"><span>{{$t('common.loanBankName')}}</span><span>{{data.channelCompany}}</span></div>
        <!-- 金额 -->
        <div class="items"><span>{{$t('common.amount')}}</span><span>{{data.loanAmount}}</span></div>
        <!-- 放款渠道 -->
        <div class="items"><span>{{$t('common.loanChannel')}}</span><span>{{data.payChannel}}</span></div>
        <!-- 申请时间 -->
        <div class="items"><span>{{$t('common.applyDate')}}</span><span>{{data.loanTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</span></div>
        <!-- 完成时间 -->
        <div class="items"><span>{{$t('common.CompleteTime')}}</span><span>{{data.loanCompletionTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</span></div>
        <!-- 收款人姓名 -->
        <div class="items"><span>{{$t('common.loanName')}}</span><span>{{data.userName}}</span></div>
        <!-- 收款渠道 -->
        <div class="items"><span>{{$t('common.receiptChannel')}}</span><span>{{data.withdrawChannel}}</span></div>
        <!-- 收款账号 -->
        <div class="items"><span>{{$t('common.receiptAccount')}}</span><span>{{data.withdrawAccount}}</span></div>
        <!-- 放款序列号 -->
        <div class="items"  v-if="data.controlNumber"><span>{{$t('common.loanSerialNumber')}}</span><span>{{data.controlNumber}}</span></div>

      </div>
      <!-- 下载凭证 -->
      <button @click="down">{{$t('common.downVouncher')}}</button>
     </div>
  </el-dialog>
</template>

<script>
import { keyMap } from '@/config'
import html2canvas from 'html2canvas'
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      orderId: {
        type: String,
        default: () => {}
      }
    },
    data () {
      return {
        currentData: {},
        currentVisible: false,
        loanChannelList: keyMap.loanChannelList,
        loanChannel: keyMap.loanChannel,
        data: null
      }
    },
    watch: {
      visible: {
        handler (value) {
          this.currentVisible = value
          if (value) this.getData()
        },
        immdiate: true
      }
    },
    methods: {
      async getData () {
        if (!this.orderId) return
        const res = await this.$api.systemOrder.queryLoanVoucher({
          orderId: this.orderId
        })
        console.log(res)
        const { status, error, data } = res
        if ( status === '1' && error === '00000000', data) {
          console.log(data)
          const channelCompany = this.loanChannelList.find(item => Number(item.value) === Number(data.channelCompany))
          const withdrawChannel = this.loanChannel.find(item => Number(item.value) === Number(data.withdrawChannel))
          const payChannel = this.loanChannel.find(item => Number(item.value) === Number(data.payChannel))
          this.data = {
            ...data,
            channelCompany: channelCompany ? channelCompany.label : '',
            withdrawChannel: withdrawChannel ? withdrawChannel.label : '',
            payChannel: payChannel ? payChannel.label : ''
          }
        }
      },
      handleClose () {
        this.$emit('update:visible', false);
      },
     down () {
        html2canvas(this.$refs.down, {
          useCORS: true
        }).then(canvas => {
          let url = canvas.toDataURL('image/png');
          let aLink = document.createElement('a');
          aLink.style.display = 'none'
          url.replace(/^data:image\/png/, 'data:application/octet-stream')
          aLink.href = url
          aLink.download = `${this.$t('common.loanVoucher')}${new Date().getTime()}.png`
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
        })
     }
    }
  }
</script>

<style lang="scss">
.down-vouncher {
  .el-dialog {
    width: 40%;
    min-width: 550px;
  }
  &-modal {
    background-color: #fff;
    & > .cont {
    padding: 20px 40px;
    & > img {
      display: block;
      width: 280px;
      margin: 0 auto;
      background-color: #fff;
    }
    & > .items {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      font-size: 20px;
      color: #000;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  & > button {
    width: 194px;
    height: 53px;
    display: block;
    margin: 0 auto;
    background-color: #179BD5;
    color: #fff;
    font-size: 18px;
    border: 0cap;
  }
}
}
</style>